<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p class="refreshText"></p>
  <div id="refreshContainer">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </div>

  <script lang="javascript">
    // 下拉刷新的本质是页面置于顶部时，用户下拉需要触发的动作
    // 实现分以下三步：
    // 1.监听touchstart事件，记录初始位置的值，e.touches[0].pageY
    // 2.监听touchmove事件，记录并计算当前滑动位置与初始位置的差值，大于0表示向下拉动，
    // 借助css3的translate属性使元素跟随手势下滑对应的差值，
    // 同时还设置一个允许滑动的最大值；
    // 3.监听touchend事件，若此时元素滑动达到最大值，触发callback，同时将translateY重置为0，元素回到初始位置

    const _element = document.getElementById('refreshContainer'),
    _refreshText = document.querySelector('.refreshText'),
    _startPos = 0,
    _transitionHeight = 0;

    _element.addEventListener('touchstart',function(e){
      _startPos = e.touches[0].pageY;
      _element.style.position = 'relative';
      _element.style.transition=  'transform 0s';
    })
    _element.addEventListener('touchmove',function(e){
      _transitionHeight = e.touches[0].pageY- _startPos;
      if(_transitionHeight>0&&_transitionHeight<60){
        _refreshText.innerHTML = '下拉刷新';
        _element.style.transform =`translateY(${_transitionHeight}px)`

        if(_transitionHeight>55){
          _refreshText.innerHTML = '释放更新';
        }
      }
    })
    _element.addEventListener('touchend',function(e){
      _element.style.transition = 'transform 0.5s ease 1s';
      _element.style.transform = 'translateY(0px)';
      _refreshText.innerHTML = '更新中。。。';
    })
  </script>
</body>
</html>